<style scoped>

.apple-sliver {
	width: 100%;
	/* background-color: transparent; */
}

</style>

<template>
	<view class="apple-sliver" :style="{height: height, backgroundColor: backgroundColor}"></view>
</template>

<script>
export default {
	props: {
		backgroundColor: {
			type: String,
			default: "transparent"
		}
	},

	data() {
		return {
			height: ""
		};
	},

	created() {
		wx.getSystemInfo({
			success: (res) => {
				const model = res.model;
				let height = "";

				switch(model) {
					case "iPhone X":
						height = "68rpx";
					break;
				}

				this.height = height;
			}
		});
	}
};
</script>